import React, { } from 'react';
import styled from "styled-components";
import { Menu } from 'antd';
import { Link } from 'react-router-dom';
import
{
    MailOutlined,
    CalendarOutlined,
    AppstoreOutlined,
    SettingOutlined,
    LinkOutlined,
} from '@ant-design/icons';
const MySideBar = styled.div`
width:256px;
height:100vh;
background:white;
overflow:auto;
`;
const { SubMenu } = Menu;
export default function
    SideBar(props: any)
{
    return (
        <MySideBar>
            <Menu
                style={{ width: 256 }}
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                mode="inline"
            >
                <Menu.Item key="1" icon={<MailOutlined />}>
                    <Link to='/Home'>Table</Link>
                </Menu.Item>
                <Menu.Item key="2" icon={<CalendarOutlined />}>
                    <Link to='/Map'>Map</Link>
                </Menu.Item>
                <SubMenu key="sub1" icon={<AppstoreOutlined />} title="Navigation Two">
                    <Menu.Item key="3">Option 3</Menu.Item>
                    <Menu.Item key="4">Option 4</Menu.Item>
                    <SubMenu key="sub1-2" title="Submenu">
                        <Menu.Item key="5">Option 5</Menu.Item>
                        <Menu.Item key="6">Option 6</Menu.Item>
                    </SubMenu>
                </SubMenu>
                <SubMenu key="sub2" icon={<SettingOutlined />} title="Navigation Three">
                    <Menu.Item key="7">Option 7</Menu.Item>
                    <Menu.Item key="8">Option 8</Menu.Item>
                    <Menu.Item key="9">Option 9</Menu.Item>
                    <Menu.Item key="10">Option 10</Menu.Item>
                </SubMenu>
                <Menu.Item key="link" icon={<LinkOutlined />}>
                    <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
                        Ant Design
                    </a>
                </Menu.Item>
            </Menu>
        </MySideBar>
    );
}
